import { useMount } from 'ahooks'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { Sidebar } from '@/components/sidebar'
import { ThemeProvider } from '@/components/theme-provider'
import { MenuBar } from '@/components/menu-bar'

/**
 * 登录之后的页面的根布局
 *
 * @returns
 */
export default function RootLayout() {
  const location = useLocation()
  const navigate = useNavigate()

  useMount(() => {
    if (location.pathname === '/') {
      navigate('/workbench', { replace: true })
    }
  })

  return (
    <ThemeProvider storageKey='vite-ui-theme'>
      <div className='z-50 fixed left-0 top-0 bottom-0 w-20'>
        <Sidebar />
      </div>
      <div className='relative ml-20'>
        <Outlet />
        {window.CallBridge && <MenuBar />}
      </div>
    </ThemeProvider>
  )
}
